<template>
  <div class="song-lyric">
    <div class="lyric">
      <h1 class="lyric-title">歌词</h1>
      <transition-group name="lyric-fade">
          <!--有歌词，显示歌词列表-->
          <ul :style="{top:lrcTop}" class="has-lyric" key="has-lyric" v-if="lyr.length" ref="lyricUL">
            <li v-for="(item, index) in lyr" v-bind:key="index" ref="lyric">
              {{ item[1] }}
            </li>
          </ul>
        <!--没歌词-->
        <div v-else class="no-lyric" key="no-lyric">
          <span>暂无歌词</span>
        </div>
      </transition-group>
    </div>
    <!--评分-->
    <div class="comm">
      <div class="song-score">
        <div>
          <h3 v-if="has_rank">歌曲评分：{{song_score}}</h3>
          <h3 v-else>歌曲评分：暂无评分</h3>
          <div>
            <el-rate v-model="song_score" disabled></el-rate>
          </div>
        </div>
        <div>
          <h3 v-if="has_my_rank">我的评分：{{my_score}}</h3>
          <h3 v-else>我的评分：暂无评分</h3>
          <div @click="pushValue()">
            <el-rate v-model="my_score" show-text allow-half></el-rate>
          </div>
        </div>
      </div>
      <!--评论-->
      <comment :playId="id"></comment>
    </div>
  </div>
</template>

<script>
import mixin from '../mixin'
import Comment from '../components/Comment'
import { mapGetters } from 'vuex'
import {HttpManager} from '../api/index'

export default {
  name: 'lyric',
  mixins: [mixin],
  components: {
    Comment
  },
  data () {
    return {
      lrcTop: '200px', // 歌词滑动
      showLrc: false, // 切换唱片和歌词
      lyr: [], // 当前歌曲的歌词
      my_score: 0,
      before_my_score: 0,
      song_score: 0,
      has_rank: false,
      has_my_rank: false
    }
  },
  computed: {
    ...mapGetters([
      'curTime',
      'id', // 歌曲ID
      'userId',
      'lyric', // 歌词
      'listOfSongs', // 存放的音乐
      'listIndex' // 当前歌曲在歌曲列表的位置
    ])
  },
  methods: {
    getRank (id) {
      HttpManager.getRankOfSongId(id)
        .then(res => {
          if(res === -1) {
            this.song_score = 0
            this.has_rank = false
          } else {
            this.song_score = res / 2
            this.has_rank = true
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 提交评分
    pushValue () {
      if(!this.has_my_rank){
        if (this.loginIn) {
          let params = new URLSearchParams()
          params.append('songId', this.id)
          params.append('consumerId', this.userId)
          params.append('score', this.my_score * 2)
          HttpManager.setRank(params)
            .then(res => {
              if (res.code === 1) {
                this.getRank(this.songId)
                this.getMyRand(this.songId)
                this.notify('评分成功', 'success')
                this.$router.go(0)
              } else {
                this.notify('评分失败', 'error')
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          this.my_score = 0
          this.notify('请先登录', 'warning')
        }
      } else {
        this.my_score = this.before_my_score
        this.notify('评分不可修改！', 'warning')
      }

    },
    getMyRand (id) {
      if (this.loginIn) {
        HttpManager.getMyRank(this.userId, id)
          .then(res => {
            if(res === -1) {
              this.my_score = 0
              this.has_my_rank = false
            } else {
              this.my_score = res / 2
              this.before_my_score = res / 2
              this.has_my_rank = true
            }

          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  },
  watch: {
    id: function () {
      this.lyr = this.parseLyric(this.listOfSongs[this.listIndex].lyric)
      this.getRank(this.id)
      if(this.loginIn){
        this.getMyRand(this.id)
      }
    },
    // 播放时间的开始和结束
    curTime: function () {
      // 处理歌词位置及颜色
      if (this.lyr.length !== 0) {
        for (let i = 0; i < this.lyr.length; i++) {
          if (this.curTime >= this.lyr[i][0]) {
            for (let j = 0; j < this.lyr.length; j++) {
              document.querySelectorAll('.has-lyric li')[j].style.color = '#000'
              document.querySelectorAll('.has-lyric li')[j].style.fontSize = '15px'
            }
            if (i >= 0) {
              document.querySelectorAll('.has-lyric li')[i].style.color = '#95d2f6'
              document.querySelectorAll('.has-lyric li')[i].style.fontSize = '25px'
            }
            //自动滚动
            document.documentElement.scrollTop = document.body.scrollTop = -(220 - (40 * (i + 1)))
          }
        }
      }
    }
  },
  created () {
    this.lyr = this.lyric ? this.lyric : []
    this.getRank(this.id)
    if(this.loginIn){
      this.getMyRand(this.id)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/lyric.scss';
</style>
